<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <div class="w-1/4 xl:w-1/5 mr-2 overflow-hidden bg-white h-full">
      <BasicTree
        :title="t('流程任务状态')"
        :clickRowToExpand="true"
        :treeData="treeData"
        :fieldNames="{ key: 'id', title: 'name' }"
        @select="handleSelect"
        :selectedKeys="selectedKeys"
      />
    </div>
    <div class="w-3/4 xl:w-4/5">
      <component :is="data.componentName" />
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { reactive, shallowRef, defineAsyncComponent, unref, ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTree } from '/@/components/Tree';
  import ToDoTasks from './components/processTasks/ToDoTasks.vue';
  import { useRouter } from 'vue-router';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const { currentRoute } = useRouter();
  const FlowLaunch = defineAsyncComponent({
    loader: () => import('./FlowLaunch.vue'),
  });

  const MyProcess = defineAsyncComponent({
    loader: () => import('./components/processTasks/MyProcess.vue'),
  });
  const TaskDone = defineAsyncComponent({
    loader: () => import('./components/processTasks/TaskDone.vue'),
  });

  const RecycleBin = defineAsyncComponent({
    loader: () => import('./components/processTasks/RecycleBin.vue'),
  });

  const MyCirculation = defineAsyncComponent({
    loader: () => import('./components/processTasks/MyCirculation.vue'),
  });

  const Drafts = defineAsyncComponent({
    loader: () => import('./components/processTasks/Drafts.vue'),
  });
  const componentByType: Map<string, any> = new Map([
    ['ToDoTasks', ToDoTasks],
    ['FlowLaunch', FlowLaunch],
    ['TaskDone', TaskDone],
    ['MyProcess', MyProcess],
    ['RecycleBin', RecycleBin],
    ['MyCirculation', MyCirculation],
    ['Drafts', Drafts],
  ]);

  const treeData = [
    {
      key: 'ToDoTasks',
      id: 'ToDoTasks',
      name: t('待办任务'),
      icon: 'ant-design:profile-outlined',
    },
    {
      key: 'FlowLaunch',
      id: 'FlowLaunch',
      name: t('发起流程'),
      icon: 'ant-design:profile-outlined',
    },
    {
      key: 'TaskDone',
      id: 'TaskDone',
      name: t('已办任务'),
      icon: 'ant-design:profile-outlined',
    },
    {
      key: 'MyProcess',
      id: 'MyProcess',
      name: t('我的流程'),
      icon: 'ant-design:profile-outlined',
    },
    {
      key: 'MyCirculation',
      id: 'MyCirculation',
      name: t('我的传阅'),
      icon: 'ant-design:profile-outlined',
    },
    {
      key: 'Drafts',
      id: 'Drafts',
      name: t('草稿箱'),
      icon: 'ant-design:profile-outlined',
    },
    {
      key: 'RecycleBin',
      id: 'RecycleBin',
      name: t('回收站'),
      icon: 'ant-design:profile-outlined',
    },
  ];
  const selectedKeys = ref(['ToDoTasks']);
  let id = unref(currentRoute).query.name;
  let data = reactive({
    componentName: shallowRef(ToDoTasks),
  });
  if (id) {
    selectedKeys.value = [id.toString()];
    handleSelect([id]);
  }
  function handleSelect(componentRow) {
    if (componentRow.length > 0 && componentRow[0]) {
      data.componentName = componentByType.has(componentRow[0])
        ? componentByType.get(componentRow[0])
        : ToDoTasks;
    }
  }
</script>
<style lang="less" scoped></style>
